<template>
  <div>
    <el-form-item :label="labelNamme" :prop="validataField" ref="uploadElement">
      <el-upload
        name="file"
        class="avatar-uploader"
        accept="image/jpeg; image/png;"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="listStyle"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
      </el-upload>
      <el-button>{{ BtnName }}</el-button>
      <el-dialog :visible.sync="dialgoVisible">
        <img width="100%" :src="imageUrl" alt="" />
      </el-dialog>
    </el-form-item>
  </div>
</template>
<script>
export default {
  props: {
    BtnName: {
      type: String,
      default: "上传",
    },
    labelNamme: {
      type: String,
      default: "证件照",
    },
    validataField: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dialgoVisible: false,
      imageUrl: "",
      listStyle: false,
    };
  },
  methods: {
    // 图片预览
    handlePictureCardPreview(file) {},
    // 图片上传成功后的回调
    handleAvatarSuccess() {},
    // 上传文件前处理
    beforeAvatarUpload() {},
    // 图片删除
    handleRemove() {
      setTimeout(() => {
        this.$;
      }, 100);
    },
  },
};
</script>
<style lang="less">
</style>